<template>
    <main>
        <mdui-top-app-bar>
            <mdui-button-icon @click="router.push('/record')">
                <SvgIcon :path="mdiChevronLeft" type="mdi" />
            </mdui-button-icon>
            <mdui-top-app-bar-title>{{ title }} 的默写战绩<mdui-badge variant="large" style="transform: translateY(-4px);">{{
                formatTime(stime) }}</mdui-badge></mdui-top-app-bar-title>
            <div style="flex-grow: 1"></div>

        </mdui-top-app-bar>

        <mdui-card class="data_box">
            <div class="data_box_true">
                <span :style="{ color: co }">{{ Math.floor(final_data.correctRateRate * 10000) / 100 }}%</span>
                <span>正答率</span>
            </div>
            <div class="row">
                <div class="row_item">
                    <span>{{ final_data.num }}</span>
                    <span>单词表总词数</span>
                </div>
                <div class="row_item">
                    <span>{{ final_data.nullNum }}</span>
                    <span>未答词数</span>
                </div>
            </div>
            <div class="row">
                <div class="row_item">
                    <span>{{ final_data.correctNum }}</span>
                    <span>正确数量</span>
                </div>
                <div class="row_item">
                    <span>{{ final_data.wrongNum }}</span>
                    <span>错误数量</span>
                </div>
            </div>
        </mdui-card>

        <div class="cont" ref="cont">
            <div class="itemBox" v-for="(item, index) in wordsData" :key="item._id">
                <div v-for="(itemw, indexw) in item.data" :key="itemw._id" class="word_item_card">
                    <span class="trans">{{ itemw.trans }}</span>
                    <p class="word">您的答案：<span :style="{color:itemw.word.toLowerCase() == itemw.ans.toLowerCase() ? 'green':'red',fontWeight:600}">{{ itemw.word }}</span></p>
                    <p class="ans">正确答案：{{ itemw.ans }}</p>
                </div>



            </div>
        </div>
    </main>
</template>

<script setup>
import { onMounted, ref, reactive, watch } from 'vue'
import { useRoute } from 'vue-router'
import { snackbar } from 'mdui/functions/snackbar.js';
import SvgIcon from '@jamescoyle/vue-icon'
import { mdiChevronLeft, mdiPublish } from '@mdi/js'
import { prompt } from "mdui/functions/prompt.js";
import { confirm } from 'mdui/functions/confirm.js';
import { formatTime } from '@/assets/helper';
import router from '@/router';
const route = useRoute()
const id = ref(route.params.id)
const sid = ref(0)
const stime = ref(0)
const co = ref("")
const final_data = ref({
    correctRateRate: 0,
    num: 0,
    nullNum: 0,
    correctNum: 0,
    wrongNum: 0

})
const wordsData = reactive([])


if (!Object.keys(localStorage).includes(id.value)) {
    console.log("id not found");

    router.push("/")
} else {
    let d = JSON.parse(localStorage.getItem(id.value)).data
    wordsData.push(...d)
}
// 以-分割获取id
const idArr = id.value.split('-')
console.log(idArr);
watch(final_data, () => { // 设置颜色
    if (final_data.value.correctRateRate == 1) {
        co.value = "green"
    } else if (final_data.value.correctRateRate >= 0.8) {
        co.value = "blue"
    } else if (final_data.value.correctRateRate >= 0.6) {
        co.value = "orange"
    } else {
        co.value = "red"
    }
}, {
    deep: true
})
if (idArr.length == 3 && idArr[0] == 'dic') {
    sid.value = idArr[1]
    stime.value = Number(idArr[2])
    fetch(`${window.server}/api/get_words`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ id: sid.value })

    })
        .then(response => response.json())
        .then(data => {
            if (data.message === "Success") {
                console.log(data)
                title.value = data.name
                rewWords.splice(0, rewWords.length) // 清空原有的单词列表
                data.words.forEach(item => {
                    rewWords.push({
                        _id: item._id,
                        data: item.data
                    })
                })

                // 获取单词数量
                let total = 0
                let correctNum = 0
                let wrongNum = 0
                let nullNum = 0
                wordsData.forEach(item => {
                    total += item.data.length
                    item.data.forEach(item => {

                        if (item.word == "") {
                            nullNum++
                            //wrongNum++

                        } else if (item.word.toLowerCase() == item.ans.toLowerCase()) {
                            correctNum++
                        } else {
                            wrongNum++
                        }
                    })
                })

                final_data.value.num = total
                final_data.value.correctNum = correctNum
                final_data.value.wrongNum = wrongNum
                final_data.value.nullNum = nullNum
                final_data.value.correctRateRate = 1 - (nullNum + wrongNum) / total



            } else {
                snackbar({
                    message: data.message || "获取单词失败",
                });
            }
        })
        .catch(error => {
            console.error("请求错误:", error)
            snackbar({
                message: "请求错误，请稍后再试",
            });
        })
} else {
    router.push({ path: '/' })
}

const rewWords = reactive([])
const title = ref('')
onMounted(() => {

})

</script>

<style scoped>
.data_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    span {
        display: block;
    }

    .data_box_true {
        width: 100%;
        height: 200px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span:nth-child(1) {
            font-size: 35px;
            font-weight: bold;
        }

        span:nth-child(2) {
            font-size: 14px;
            color: gray;

        }
    }

    .row {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;

        .row_item {
            width: 50%;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            span:nth-child(1) {
                font-size: 25px;
                font-weight: bold;
            }

            span:nth-child(2) {
                font-size: 14px;
                color: gray;

            }
        }
    }
}


.itemBox {
    width: 100%;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 30px;
    box-sizing: border-box;
    max-width: 700px;
    margin: 0 auto;

}

.word_item_card {
    .ans{
    }
    .trans {
        font-size: 20px;
        font-weight: 600;
        line-height: 60px;
        position: relative;
        display: inline-block;
        transform: translateX(8px);

        &::after {
            content: "";
            position: absolute;
            width: 4px;
            height: 20px;
            background-color: #0061A4;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            border-radius: 2px;
        }
    }


}
</style>